<template>
    <div>
        <div class="middl_box" id="print">
            <h1>
                浙江永坚新材料科技股份有限公司
            </h1>
            <table class="tab_top_box">
                <tr>
                    <td>出库单号：{{form.waybillNo}}</td>
                    <td>出库日期：{{form.waybillTime}}</td>
                    <td>联系人：{{form.contacts}}</td>
                </tr>
                <tr>
                    <td>仓库：{{form.warehouseName}}-{{form.warehouseArea}}</td>
                    <td>运输单位：{{form.transportUnit}}</td>
                    <td>联系电话：{{form.contact}}</td>
                </tr>
                <tr>
                    <td>客户：{{form.customer}}</td>
                    <td>运输方式：{{form.transportType}}</td>
                    <td>车牌号码：{{form.carNo}}</td>
                </tr>
                <tr>
                    <td>项目名称：{{form.projectName}}</td>
                    <td>栋号：{{form.buildNo}}</td>
                </tr>
                <tr>
                    <td>摘要：{{digest}}</td>
                </tr>
            </table>

            <div class="fhuod_box">
                发货单共五联，第一联财务、第二联预算、第三联对账、第四联物流、第五连项目工地。<br>
                最终单块构件方量按实际方量进行决算。
            </div>
            <el-form>
                <el-table border :data="detailednessList" tooltip-effect="dark" style="width: 100%">
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="compomentType" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="compWarehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="texture" label="材质" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度(mm)" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="netWeight" label="单净重量(KG)" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="comment" label="备注" show-overflow-tooltip>

                    </el-table-column>


                </el-table>
            </el-form>
            <ul>
                <li>制单人：{{form.producer}}</li>
                <li>审批人：{{form.approval}}</li>
                <li>发货员：{{form.consignor}}</li>
                <li>司机：{{form.driver}}</li>
                <li>收货人：{{form.receivingUser}}</li>
            </ul>

        </div>
        <div class="dayin">
            <el-row>
            <el-button type="primary" @clck="stamp"  v-print="'#print'">打印</el-button>
        </el-row>
        </div>
    </div>
</template>
<script>
import { mimeographList,printWaybillList } from "@/api/yard/WaybillInfo";
import print from 'vue-print-nb'
export default {
    directives: {
    print   
},
    data() {
        return {
            detailednessList: [],
            digest: '',
            form: {},
            Lit: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                createBy: null,
                receiptMaterialNo: null,
                categoryName: null,
                supplierTheme: null,
                supplierName: null,
                materialType: null,
                warehouseName: null,
                warehouseArea: null,
                materialPerson: null,
                materialTime: null,
                projectNo: null,
                categoryNo: null,
                specifications: null,
                unit: null,
                materialName: null,
                count: null,
                updateTime: null,
                updateBy: null,
                createTime: null,
                deliveryPlanNo: null,
                deliveryPlanState: null,
                comment: null,
                deliverGoodsTime: null,
                waybillNo: null,
                length: null,
                netWeight: null,
                compWarehouseName: null,
                warehouseCompomentNo: null,
                needCompany: null,
                planWeight: null,
                actualWeight: null,
                planCount: null,
                actualCount: null,
                receivingAddress: null,
                approverBy: null,
                floor: null,
                stockCount: null,
            }
        }
    },
    created() {
        mimeographList(this.$route.query.id).then((res) => {

            console.log("str", res.data.compWarehouseInfoList);
            this.form = res.data
            this.detailednessList = res.data.compWarehouseInfoList;
            let lit = res.data.compWarehouseInfoList;
            let str = '';
            for (let i = 0; i < lit.length; i++) {
                str = str + lit[i].compomentName + '叠合板' + lit[i].laminatedPlateCount + '个，';
            }
            if (str.length > 0) {
                str = str.substr(0, str.length - 1)
            }

            this.digest = str;
        });
    },
    methods: {
        stamp() {
            printWaybillList({'id':this.form.id}).then(res=>{

            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .dayin{
        text-align: center;
        width: 60%;
        margin: 100px auto;
    }
.middl_box {
    width: 60%;
    margin: 100px auto;

    h1 {
        text-align: center;
        font-weight: 700;
        font-size: 30px;
    }

    .tab_top_box {
        font-weight: 700;
        margin: auto;

        td {
            font-size: 18px;
            width: 340px;
        }
    }

    .fhuod_box {
        font-size: 18px;
        font-weight: 700;
        width: 100%;
        text-align: left;
    }

}

ul {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    li {
        font-size: 14px;
        font-weight: 700;
        width: 22%;
        list-style: none;
    }
}
</style>